<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-Flutter-MaterialApp常用属性介绍" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/" class="article-date">
  <time datetime="2019-12-29T14:24:09.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="debugShowCheckedModeBanner"><a href="#debugShowCheckedModeBanner" class="headerlink" title="debugShowCheckedModeBanner"></a>debugShowCheckedModeBanner</h2><p>将此行代码赋为false，页面右上角将会取消debug的条幅</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">debugShowCheckedModeBanner: false, // 消除页面右上角的debug条幅</span><br></pre></td></tr></table></figure>

<h2 id="theme"><a href="#theme" class="headerlink" title="theme"></a>theme</h2><p>可以通过此API设置页面的主题颜色</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">MaterialApp(</span><br><span class="line">    debugShowCheckedModeBanner: false, // 消除页面右上角的debug条幅</span><br><span class="line">    title: &apos;江约&apos;,</span><br><span class="line">    home: MainApp(),</span><br><span class="line">    theme: ThemeData(</span><br><span class="line">//      primarySwatch: Colors.yellow // 更换主题颜色</span><br><span class="line">      highlightColor: Color.fromRGBO(255, 0, 0, 0.5), // 一次点击水波纹的颜色</span><br><span class="line">      splashColor: Colors.green // 二次点击的水波纹颜色</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-b9bcfaf8dfc4424d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="一次点击的水波纹"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-ad7aa601c650b080.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="两次点击的水波纹"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-MaterialApp常用属性介绍/" data-id="ck4r400p20034l0w0vvrb4cka" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Flutter-ListView" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-ListView/" class="article-date">
  <time datetime="2019-12-29T14:22:33.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><code>ListView</code>是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">class ListViewDemoPage extends StatelessWidget &#123;</span><br><span class="line">  Widget _listItemBuilder(BuildContext context, int index)&#123;</span><br><span class="line">    return Container(</span><br><span class="line">      color: Colors.white,</span><br><span class="line">      margin: EdgeInsets.all(8),</span><br><span class="line">      child: Column(</span><br><span class="line">        children: &lt;Widget&gt;[</span><br><span class="line">          Image.network(posts[index].imageUrl),</span><br><span class="line">          SizedBox(height: 16,),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].title,</span><br><span class="line">            style: Theme.of(context).textTheme.title,</span><br><span class="line">          ),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].author,</span><br><span class="line">            style: Theme.of(context).textTheme.subhead,</span><br><span class="line">          ),</span><br><span class="line">          SizedBox(height: 16,)</span><br><span class="line">        ],</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return Scaffold(</span><br><span class="line">      backgroundColor: Colors.grey[200],</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&apos;ListView&apos;),</span><br><span class="line">      ),</span><br><span class="line">      body: ListView.builder(</span><br><span class="line">        itemCount: posts.length, // post为一个数据源</span><br><span class="line">        itemBuilder: _listItemBuilder,</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="数据源post"><a href="#数据源post" class="headerlink" title="数据源post"></a>数据源post</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br></pre></td><td class="code"><pre><span class="line">class Post &#123;</span><br><span class="line">  Post(&#123;</span><br><span class="line">    this.title,</span><br><span class="line">    this.author,</span><br><span class="line">    this.imageUrl,</span><br><span class="line">    this.description,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  final String title;</span><br><span class="line">  final String author;</span><br><span class="line">  final String imageUrl;</span><br><span class="line">  final String description;</span><br><span class="line"></span><br><span class="line">  bool selected = false;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">final List&lt;Post&gt; posts = [</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Candy Shop&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/candy-shop.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Childhood in a picture&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/childhood-in-a-picture.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Contained&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/contained.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Dragon&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/dragon.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Free Hugs&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/free_hugs.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Gravity Falls&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/gravity-falls.png&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Icecream Truck&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/icecreamtruck.png&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;keyclack&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/keyclack.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Overkill&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/overkill.png&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Say Hello to Barry&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/say-hello-to-barry.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Space Skull&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/space-skull.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;The Old Fashioned&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/the-old-fashioned.png&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Tornado&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/tornado.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;Undo&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/undo.jpg&apos;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &apos;White Dragon&apos;,</span><br><span class="line">    author: &apos;Mohamed Chahin&apos;,</span><br><span class="line">    description: &apos;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&apos;,</span><br><span class="line">    imageUrl: &apos;https://resources.ninghao.org/images/white-dragon.jpg&apos;,</span><br><span class="line">  )</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-ListView/" data-id="ck4r400sj009wl0w07v9givb6" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Flutter-AppBar" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-AppBar/" class="article-date">
  <time datetime="2019-12-29T14:20:38.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>导航栏</p>
<h2 id="centerTitle"><a href="#centerTitle" class="headerlink" title="centerTitle"></a>centerTitle</h2><p>居中AppBar中的title</p>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-d6a4fe66539417a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="centerTitle"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">appBar: AppBar(</span><br><span class="line">  centerTitle: true,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<h2 id="leading"><a href="#leading" class="headerlink" title="leading"></a>leading</h2><p>会在导航栏最左侧出现一个图标</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">leading: IconButton(</span><br><span class="line">  icon: Icon(Icons.menu),</span><br><span class="line">  tooltip: &apos;Navigration&apos;,</span><br><span class="line">  onPressed: ()=&gt;&#123;</span><br><span class="line">  debugPrint(&apos;Navigration button is pressed&apos;),</span><br><span class="line">  &#125;,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-b82d8b66327ec9a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="leading"></p>
<h2 id="actions"><a href="#actions" class="headerlink" title="actions"></a>actions</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">actions: &lt;Widget&gt;[</span><br><span class="line">  IconButton(</span><br><span class="line">    icon: Icon(Icons.search),</span><br><span class="line">    tooltip: &apos;Navigration&apos;,</span><br><span class="line">    onPressed: ()=&gt;&#123;</span><br><span class="line">        debugPrint(&apos;Search button is pressed&apos;),</span><br><span class="line">    &#125;,</span><br><span class="line">  ),</span><br><span class="line">  IconButton(</span><br><span class="line">    icon: Icon(Icons.more_horiz),</span><br><span class="line">    tooltip: &apos;Navigration&apos;,</span><br><span class="line">    onPressed: ()=&gt;&#123;</span><br><span class="line">      debugPrint(&apos;more_horiz button is pressed&apos;),</span><br><span class="line">    &#125;,</span><br><span class="line">  ),</span><br><span class="line">],</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-909847163ea4daeb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="actions"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-AppBar/" data-id="ck4r400p10032l0w0wem63o2z" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Flutter-TabBar" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-TabBar/" class="article-date">
  <time datetime="2019-12-29T14:20:15.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Tab 标签栏的基本组成是顶部的 Tab标题和内容区域，在 Flutter 中，Material 提供了 TabBar 和 TabBarView 两个 Widget</p>
<p><code>TabBar</code>必须是放在<code>AppBar</code>的<code>bottom</code>下</p>
<h2 id="TabBar和Tab"><a href="#TabBar和Tab" class="headerlink" title="TabBar和Tab"></a>TabBar和Tab</h2><p><code>TabBar</code>和<code>Tab</code>都是设置标签栏的内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">bottom: TabBar(</span><br><span class="line">  tabs: &lt;Widget&gt;[</span><br><span class="line">    Tab(icon: Icon(Icons.local_florist),),</span><br><span class="line">    Tab(icon: Icon(Icons.change_history),),</span><br><span class="line">    Tab(icon: Icon(Icons.directions_bike),),</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-9f69cf8702805a3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="TabBar"></p>
<h3 id="TabBar主要属性简介"><a href="#TabBar主要属性简介" class="headerlink" title="TabBar主要属性简介"></a>TabBar主要属性简介</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">bottom: TabBar(</span><br><span class="line">  unselectedLabelColor: Colors.black38, // 标签栏中未选择的图标颜色</span><br><span class="line">  indicatorColor: Colors.black54, // 标签栏中选中的线（指示器）的颜色</span><br><span class="line">  indicatorSize: TabBarIndicatorSize.label, // 线的长度</span><br><span class="line">  indicatorWeight: 1.0, // 线的宽度</span><br><span class="line">  tabs: &lt;Widget&gt;[</span><br><span class="line">    Tab(icon: Icon(Icons.local_florist),),</span><br><span class="line">    Tab(icon: Icon(Icons.change_history),),</span><br><span class="line">    Tab(icon: Icon(Icons.directions_bike),),</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2384f5b65235a51f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="属性改变后"></p>
<h2 id="TabBarView"><a href="#TabBarView" class="headerlink" title="TabBarView"></a>TabBarView</h2><p><code>TabBarView</code>则是设置每一个标签栏选项的页面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">TabBarView(</span><br><span class="line">  children: &lt;Widget&gt;[</span><br><span class="line">    Icon(Icons.local_florist, size: 128, color: Colors.black12,),</span><br><span class="line">    Icon(Icons.change_history, size: 128, color: Colors.black12,),</span><br><span class="line">    Icon(Icons.directions_bike, size: 128, color: Colors.black12,)</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-1fc590d72f1f4133.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="TabBarView"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-TabBar/" data-id="ck4r400p40038l0w0wku9wtfq" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Flutter-按钮" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-按钮/" class="article-date">
  <time datetime="2019-12-29T14:19:44.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在 Flutter 里有很多的 Button，包括了：RaisedButton、FloatingActionButton、FlatButton、IconButton、PopupMenuButton、ButtonContainer</p>
<h2 id="RaisedButton"><a href="#RaisedButton" class="headerlink" title="RaisedButton"></a>RaisedButton</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton(</span><br><span class="line">    child: Text(&apos;Button&apos;),</span><br><span class="line">    onPressed: ()&#123;&#125;,</span><br><span class="line">    splashColor: Colors.grey,</span><br><span class="line">    textColor: Theme.of(context).accentColor,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2e73c1d5f5256681.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="RaiseButton"></p>
<h2 id="FloatingActionButton"><a href="#FloatingActionButton" class="headerlink" title="FloatingActionButton"></a>FloatingActionButton</h2><p>FloatingActionButton 是一个浮动在页面右下角的浮动按钮。</p>
<p>当然，我们也可以根据一定的写法来让其位置变化</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">class FloatingActionButtonDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line"></span><br><span class="line">    final Widget _floatingActionButton = FloatingActionButton(</span><br><span class="line">      onPressed: ()&#123;&#125;,</span><br><span class="line">      child: Icon(Icons.add),</span><br><span class="line">      elevation: 0.0, // 设置阴影</span><br><span class="line">      backgroundColor: Colors.red,</span><br><span class="line">//      shape: BeveledRectangleBorder( // 设置按钮形状</span><br><span class="line">//        borderRadius: BorderRadius.circular(30.0)</span><br><span class="line">//      ),</span><br><span class="line">    );</span><br><span class="line">    // extended创建的漂浮动作按钮</span><br><span class="line">    final _floatingActionButtonExtended = FloatingActionButton.extended(</span><br><span class="line">      onPressed: ()&#123;&#125;,</span><br><span class="line">      icon: Icon(Icons.add),</span><br><span class="line">      label: Text(&apos;Add&apos;),</span><br><span class="line">    );</span><br><span class="line"></span><br><span class="line">    return Scaffold(</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&apos;FloatingActionButtonDemo&apos;),</span><br><span class="line">        elevation: 0.0,</span><br><span class="line">      ),</span><br><span class="line">      // 漂浮动作按钮</span><br><span class="line">      floatingActionButton: _floatingActionButton,</span><br><span class="line">      // 漂浮动作按钮默认会在底部工具栏上面，可以通过下面方法调整漂浮动作按钮的位置</span><br><span class="line">      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,</span><br><span class="line">      bottomNavigationBar: BottomAppBar(</span><br><span class="line">        child: Container(height: 50,),</span><br><span class="line">        shape: CircularNotchedRectangle(), // 设置漂浮动作按钮与底部工具栏之间的切口</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="FlatButton"><a href="#FlatButton" class="headerlink" title="FlatButton"></a>FlatButton</h2><p>文字按钮</p>
<p>FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">new FlatButton(</span><br><span class="line">    child: new Text(&apos;点我&apos;),</span><br><span class="line">    onPressed: () &#123;&#125;,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<h2 id="IconButton"><a href="#IconButton" class="headerlink" title="IconButton"></a>IconButton</h2><p>IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。<br>这里我们拿RaisedButton来举例（其他按钮也有这样的写法）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton.icon(</span><br><span class="line">  onPressed: ()&#123;&#125;,</span><br><span class="line">  icon: Icon(Icons.add),</span><br><span class="line">  label: Text(&apos;Button&apos;),</span><br><span class="line">  elevation: 12,</span><br><span class="line">  textColor: Theme.of(context).accentColor,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-125f96dd8bdf8e50.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="RaisedButton.icon"></p>
<h2 id="PopupMenuButton"><a href="#PopupMenuButton" class="headerlink" title="PopupMenuButton"></a>PopupMenuButton</h2><p>下拉菜单按钮</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">class PopupMenuButtonDemo extends StatefulWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  _PopupMenuButtonDemoState createState() =&gt; _PopupMenuButtonDemoState();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class _PopupMenuButtonDemoState extends State&lt;PopupMenuButtonDemo&gt; &#123;</span><br><span class="line">  String _currentMenuItem = &apos;Home&apos;;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return Scaffold(</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&apos;_WidgetDemo&apos;),</span><br><span class="line">        elevation: 0,</span><br><span class="line">      ),</span><br><span class="line">      body: Container(</span><br><span class="line">        padding: EdgeInsets.all(16),</span><br><span class="line">        child: Column(</span><br><span class="line">          mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">          children: &lt;Widget&gt;[</span><br><span class="line">            Row(</span><br><span class="line">              mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">              children: &lt;Widget&gt;[</span><br><span class="line">                Text(_currentMenuItem),</span><br><span class="line">                PopupMenuButton(</span><br><span class="line">                  onSelected: (value)&#123;</span><br><span class="line">                    setState(() &#123;</span><br><span class="line">                      _currentMenuItem = value;</span><br><span class="line">                    &#125;);</span><br><span class="line">                  &#125;,</span><br><span class="line">                  itemBuilder: (BuildContext context)=&gt;[</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &apos;Home&apos;,</span><br><span class="line">                      child: Text(&apos;Home&apos;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &apos;Discover&apos;,</span><br><span class="line">                      child: Text(&apos;Discover&apos;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &apos;Community&apos;,</span><br><span class="line">                      child: Text(&apos;Community&apos;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &apos;Me&apos;,</span><br><span class="line">                      child: Text(&apos;Me&apos;),</span><br><span class="line">                    )</span><br><span class="line">                  ],</span><br><span class="line">                )</span><br><span class="line">              ],</span><br><span class="line">            )</span><br><span class="line">          ],</span><br><span class="line">        ),</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-10ddeaf2327efab2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="PopupMenuButton 未点击"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-f39da00b54f6c5b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="PopupMenuButton 点击后"></p>
<h2 id="ButtonContainer"><a href="#ButtonContainer" class="headerlink" title="ButtonContainer"></a>ButtonContainer</h2><p>按钮容器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Container(</span><br><span class="line">  width: 160, // 改变其大小可改变按钮的大小</span><br><span class="line">  child: OutlineButton(</span><br><span class="line">    child: Text(&apos;Button&apos;),</span><br><span class="line">    onPressed: ()&#123;&#125;,</span><br><span class="line">    splashColor: Colors.grey[100],</span><br><span class="line">    borderSide: BorderSide(</span><br><span class="line">      color: Colors.black</span><br><span class="line">    ),</span><br><span class="line">    textColor: Colors.black,</span><br><span class="line">    highlightColor: Colors.grey,</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-1927ce4349ee5426.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="ButtonContainer.png"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-按钮/" data-id="ck4r400p6003al0w0c372xokx" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Flutter-Drawer" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/12/29/Flutter-Drawer/" class="article-date">
  <time datetime="2019-12-29T14:18:35.000Z" itemprop="datePublished">2019-12-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Flutter/">Flutter</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/12/29/Flutter-Drawer/">Flutter-Drawer</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><code>drawer</code>是<code>Scaffold</code>一个子属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">drawer: Container(</span><br><span class="line">  color: Colors.white,</span><br><span class="line">  padding: EdgeInsets.all(8),</span><br><span class="line">  child: Column(</span><br><span class="line">    mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">    children: &lt;Widget&gt;[</span><br><span class="line">      Text(&apos;This is drawer&apos;)</span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">),</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2dcb49738643179b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="drawer"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">drawer: Drawer(</span><br><span class="line">  child: ListView(</span><br><span class="line">    padding: EdgeInsets.zero,</span><br><span class="line">    children: &lt;Widget&gt;[</span><br><span class="line">      DrawerHeader(</span><br><span class="line">        child: Text(&apos;header&apos;.toUpperCase()),</span><br><span class="line">        decoration: BoxDecoration(</span><br><span class="line">          color: Colors.grey[100]</span><br><span class="line">        ),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&apos;Messages&apos;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.message, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&apos;Favorite&apos;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.favorite, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&apos;Setting&apos;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.settings, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p><img src="https://upload-images.jianshu.io/upload_images/16731485-d6edfb37f894d987.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/12/29/Flutter-Drawer/" data-id="ck4r400oy002xl0w082iyir27" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Flutter/">Flutter</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Dart-Mixins" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/12/Dart-Mixins/" class="article-date">
  <time datetime="2019-11-12T13:16:43.000Z" itemprop="datePublished">2019-11-12</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Dart/">Dart</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/11/12/Dart-Mixins/">Dart-Mixins</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<p>mixins 是在多个类层次结构中重用代码的一种方式</p>
<p>要使用mixins，在with关键字后面跟上一个或多个mixin的名字（用逗号分隔），并且with要用在extends关键字之后</p>
<p>mixins的特征：实现mixin，就创建一个继承 Object 类的子类（不能继承其他类），不声明任何构造方法，不调用super</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/11/12/Dart-Mixins/" data-id="ck4r400oj0027l0w0iopomzf6" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Dart/">Dart</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Dart-面向对象-OOP" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/12/Dart-面向对象-OOP/" class="article-date">
  <time datetime="2019-11-12T12:03:34.000Z" itemprop="datePublished">2019-11-12</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Dart/">Dart</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/11/12/Dart-面向对象-OOP/">Dart-面向对象(OOP)</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<p>所有的类都继承自 Object</p>
<h2 id="构造方法"><a href="#构造方法" class="headerlink" title="构造方法"></a>构造方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">//命名构造方法：[类名+.+方法名]</span><br><span class="line">//使用命名构造方法为类实现多个构造方法</span><br><span class="line">Student.cover(Student stu) : super(stu.name, stu.age) &#123;</span><br><span class="line">    print(&apos;命名构造方法&apos;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//命名工厂构造方法：factory [类名+.+方法名]</span><br><span class="line">//它可以有返回值，而且不需要将类的final变量作为参数，是提供一种灵活获取类对象的方式。</span><br><span class="line">factory Student.stu(Student stu) &#123;</span><br><span class="line">    return Student(stu._school, stu.name, stu.age,</span><br><span class="line">        city: stu.city, country: stu.country);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">///工厂构造方法演示</span><br><span class="line">class Logger &#123;</span><br><span class="line">    static Logger _cache;</span><br><span class="line"></span><br><span class="line">    //  工厂构造方法：</span><br><span class="line">    //  不仅仅是构造方法，更是一种模式</span><br><span class="line">    //  有时候为了返回一个之前已经创建的缓存对象，原始的构造方法已经不能满足要求</span><br><span class="line">    //  那么可以使用工厂模式来定义构造方法</span><br><span class="line">    factory Logger() &#123;</span><br><span class="line">        if (_cache == null) &#123;</span><br><span class="line">        _cache = Logger._internal();</span><br><span class="line">        &#125;</span><br><span class="line">        return _cache;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    Logger._internal();</span><br><span class="line"></span><br><span class="line">    void log(String msg) &#123;</span><br><span class="line">        print(msg);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="set-和-get"><a href="#set-和-get" class="headerlink" title="set 和 get"></a>set 和 get</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">// 可以为私有字段设置getter来让外界获取到私有字段</span><br><span class="line">String get school =&gt; _school;</span><br><span class="line"></span><br><span class="line">// 可以为私有字段设置setter来控制外界对私有字段的修改</span><br><span class="line">set school(String value)&#123;</span><br><span class="line">    _school = value;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="static"><a href="#static" class="headerlink" title="static"></a>static</h2><ul>
<li><p>使用 static 关键字来实现类级别的变量和函数</p>
</li>
<li><p>静态成员不能访问非静态成员（ static 关键字修饰的成员 不能访问 非 static 关键字修饰的成员）</p>
</li>
<li><p>非静态成员可以访问静态成员</p>
</li>
<li><p>类中的常量是需要使用 static const 声明</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/11/12/Dart-面向对象-OOP/" data-id="ck4r400om002fl0w0odg3gr5i" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Dart/">Dart</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Dart-常用数据类型" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/12/Dart-常用数据类型/" class="article-date">
  <time datetime="2019-11-12T10:22:20.000Z" itemprop="datePublished">2019-11-12</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Dart/">Dart</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/11/12/Dart-常用数据类型/">Dart-常用数据类型</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="常用数据类型"><a href="#常用数据类型" class="headerlink" title="常用数据类型"></a>常用数据类型</h2><ol>
<li><p>数字</p>
<ul>
<li><p>num</p>
</li>
<li><p>int</p>
</li>
<li><p>double</p>
</li>
</ul>
</li>
<li><p>字符串（String）（用<code>{}</code>来计算字符串中变量的值）</p>
</li>
<li><p>布尔值（bool）</p>
</li>
<li><p>集合</p>
<ul>
<li><p>List</p>
</li>
<li><p>Map</p>
</li>
</ul>
</li>
</ol>
<h3 id="数字（Number）"><a href="#数字（Number）" class="headerlink" title="数字（Number）"></a>数字（Number）</h3><p>Number 类型包括以下两类：</p>
<ul>
<li><p>int：整形</p>
</li>
<li><p>double：浮点型</p>
</li>
</ul>
<p>int 和 double 都是 num 类型的子类。</p>
<p>num 类型包括的操作有：<code>+</code>、<code>-</code>、<code>*</code>、<code>/</code>以及位移操作<code>&gt;&gt;</code></p>
<p>num 类型包括的常用方法有：abs、ceil 和 floor</p>
<h4 id="API"><a href="#API" class="headerlink" title="API"></a>API</h4><ul>
<li><p>abs()：绝对值</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">num1.abs();</span><br></pre></td></tr></table></figure>
</li>
<li><p>toInt()：将数值转换成 int 类型</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">num1.toInt();</span><br></pre></td></tr></table></figure>
</li>
<li><p>toDouble</p>
</li>
</ul>
<h2 id="map"><a href="#map" class="headerlink" title="map"></a>map</h2><p>map 是将 key 和 value 相关联的对象，key 和 value 都可以是任何类型的对象，并且 key 是唯一的。如果 key 重复后面添加的 key 会替换前面的</p>
<h3 id="map初始化"><a href="#map初始化" class="headerlink" title="map初始化"></a>map初始化</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Map names=&#123;&apos;xiaoming&apos;: &apos;小明&apos;, &apos;xiaohong&apos;: &apos;小红&apos;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h3><ul>
<li><p>forEach()</p>
</li>
<li><p>map()</p>
</li>
<li><p>for-in</p>
</li>
</ul>
<p>注意：遍历时，新增或删除key都会报错，只能修改key</p>
<h3 id="常用API"><a href="#常用API" class="headerlink" title="常用API"></a>常用API</h3><ul>
<li><p>keys：key的集合</p>
</li>
<li><p>values：value 的集合</p>
</li>
<li><p>remove(key)：删除一个 key</p>
</li>
<li><p>removeWhere()：根据条件批量删除</p>
</li>
<li><p>containsKey()：是否包含 key</p>
</li>
<li><p>containsValue()：是否包含 value 值</p>
</li>
<li><p>clear()：清空 map</p>
</li>
<li><p>isEmpty()</p>
</li>
<li><p>toList()/toSet()：将结果转换成列表或者集合</p>
</li>
</ul>
<h2 id="dynamic、var、Object三者的区别"><a href="#dynamic、var、Object三者的区别" class="headerlink" title="dynamic、var、Object三者的区别"></a>dynamic、var、Object三者的区别</h2><h3 id="dynamic"><a href="#dynamic" class="headerlink" title="dynamic"></a>dynamic</h3><p>在编译时并不会确定数据类型，只有在运行时根据赋值判断数据类型</p>
<h3 id="var"><a href="#var" class="headerlink" title="var"></a>var</h3><p>var声明的变量在赋值的那一刻，就已经决定了它是什么类型。一旦被定义不能被改变其类型</p>
<h3 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h3><p>Object 可以被赋值为任意类型，因为所有类型都派生自 Object</p>
<h2 id="List（数组）"><a href="#List（数组）" class="headerlink" title="List（数组）"></a>List（数组）</h2><h3 id="声明"><a href="#声明" class="headerlink" title="声明"></a>声明</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var list1 = List();// 不限定长度，不限定类型，可添加任意类型的数据</span><br></pre></td></tr></table></figure>

<h3 id="常用方法"><a href="#常用方法" class="headerlink" title="常用方法"></a>常用方法</h3><ul>
<li><p>add()：添加一个元素到List末尾</p>
</li>
<li><p>addAll()：两个List合并</p>
</li>
<li><p>insert(index,element)：在指定index处插入值</p>
</li>
<li><p>insertAll(index,list)：在指定index处插入list 其余顺延</p>
</li>
<li><p>remove(obj)：删除具体的元素</p>
</li>
<li><p>removeAt(index)：删除索引位置元素</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/11/12/Dart-常用数据类型/" data-id="ck4r400ok002al0w0czao5apa" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Dart/">Dart</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Dart概述" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/11/12/Dart概述/" class="article-date">
  <time datetime="2019-11-12T10:18:42.000Z" itemprop="datePublished">2019-11-12</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Dart/">Dart</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/11/12/Dart概述/">Dart概述</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<ul>
<li><p>强类型语言，静态类型</p>
<ul>
<li>java、C#等</li>
</ul>
</li>
<li><p>面向对象的语言，OOP</p>
<ul>
<li>Python、C++、Objective-c、java、Kotlin等</li>
</ul>
</li>
<li><p>JIT &amp; AOT</p>
<ul>
<li><p>JIT：即即时编译，开发期间，更快编译，更快的重载</p>
</li>
<li><p>AOT：事前编译，release 期间，更快更流畅</p>
</li>
</ul>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/11/12/Dart概述/" data-id="ck4r400on002hl0w0ok3tb2i6" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Dart/">Dart</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/2/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>